<!--
 * @Author: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @Date: 2022-09-09 11:04:01
 * @LastEditors: 郭招娣 10615594+guo-zhaodi@user.noreply.gitee.com
 * @LastEditTime: 2022-09-20 15:59:32
 * @FilePath: \实训一git\app\src\views\Layout.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="common-layout">
    <el-container class="container">
      <el-aside :width="isCollapse ? '64px' : '200px'" class="aside">
        <el-menu
          active-text-color="#ffd04b"
          background-color="#001529"
          class="el-menu-vertical-demo"
          default-active="2"
          text-color="#fff"
          router
          :collapse="isCollapse"
          :collapse-transition="false"
        >
          <dl
            :style="{
              display: 'flex',
              alignItem: 'center',
              justifyContent: 'center',
              padding: '10px',
            }"
          >
            <dt>
              <img
                src="../assets/1.jpg"
                alt=""
                :style="{
                  width: '50px',
                  height: '50px',
                  borderRadius: '10%',
                }"
              />
            </dt>
            <dd>
              <h3
                :style="{ marginLeft: '10px', color: '#fff' }"
                v-show="isHidden"
              >
                管理后台
              </h3>
            </dd>
          </dl>
          <el-button
            type="primary"
            :style="{ width: '90%', fontSize: '15px', height: '40px' }"
            class="btn"
          >
            <el-icon color="#000" size="22">
              <Plus color="#fff" />
            </el-icon>
            <span v-show="isHidden">新建</span></el-button
          >

          <template v-for="item in menuList">
            <template v-for="(v, i) in item.children">
              <el-sub-menu :index="v.path" v-if="v.children" :key="i">
                <template #title>
                  <el-icon><Odometer /></el-icon>
                  <span>{{ v.title }}</span>
                </template>

                <el-menu-item-group v-for="n in v.children" :key="n">
                  <el-menu-item :index="n.path">
                    <el-icon><ChatLineSquare /></el-icon>
                    <span>{{ n.title }}</span>
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>

              <template v-else>
                <el-menu-item :index="v.path" :key="v">
                  <el-icon><Odometer /></el-icon>
                  <template #title>
                    <span>{{ v.title }}</span>
                  </template>
                </el-menu-item>
              </template>
            </template>
          </template>
        </el-menu>
      </el-aside>
      <el-container style="width: 100%" class="container">
        <!-- 头部 -->
        <el-header class="el-header" style="width: 100%">
          <div class="svg-right">
            <!-- 收缩侧边栏 -->
            <el-icon @click="toggleIsCollapse"><Operation /></el-icon>
            <span></span>

            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: 5px;
              "
            >
              <svg
                style="width: 2em; height: 2em; margin-right: 8px"
                viewBox="64 64 896 896"
                focusable="false"
                data-icon="github"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
              >
                <path
                  d="M511.6 76.3C264.3 76.2 64 276.4 64 523.5 64 718.9 189.3 885 363.8 946c23.5 5.9 19.9-10.8 19.9-22.2v-77.5c-135.7 15.9-141.2-73.9-150.3-88.9C215 726 171.5 718 184.5 703c30.9-15.9 62.4 4 98.9 57.9 26.4 39.1 77.9 32.5 104 26 5.7-23.5 17.9-44.5 34.7-60.8-140.6-25.2-199.2-111-199.2-213 0-49.5 16.3-95 48.3-131.7-20.4-60.5 1.9-112.3 4.9-120 58.1-5.2 118.5 41.6 123.2 45.3 33-8.9 70.7-13.6 112.9-13.6 42.4 0 80.2 4.9 113.5 13.9 11.3-8.6 67.3-48.8 121.3-43.9 2.9 7.7 24.7 58.3 5.5 118 32.4 36.8 48.9 82.7 48.9 132.3 0 102.2-59 188.1-200 212.9a127.5 127.5 0 0138.1 91v112.5c.8 9 0 17.9 15 17.9 177.1-59.7 304.6-227 304.6-424.1 0-247.2-200.4-447.3-447.5-447.3z"
                ></path>
              </svg>
              <el-dropdown>
                <span class="el-dropdown-link">
                  <el-avatar :size="30" :src="circleUrl" />
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item @click="this.$router.push('/layout/system')">个人中心</el-dropdown-item>
                    <el-dropdown-item @click="this.$router.push('/layout/users')">用户管理</el-dropdown-item>
                    <el-dropdown-item @click="back">退出登录</el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
              <p style="margin-left: 10px">
                hi!
                <span>
                  {{ user.username }}
                </span>
              </p>
            </div>
          </div>
          <el-divider style="margin: 0; margin-top: 10px" />
          <div style="background: #fff; width: 100%" v-if="workbench">
            <div style="background: #fff; width: 100%; margin: 5px">
              <p style="padding: 10px">工作台</p>
              <h3 style="font-size: 35px; padding: 10px">
                您好，<span>{{ user.username }}</span>
              </h3>
              <p style="padding: 10px">
                您的角色:
                <span v-if="role === 'TC'">管理员</span>
                <span v-if="role === 'USER'">游客</span>
              </p>
            </div>
          </div>

          <div v-else style="width: 100%; padding: 10px">
            <Breadcrumb :breadList="$store.state.breadList" />
          </div>
        </el-header>
        <el-scrollbar>
          <el-main class="content">
            <router-view></router-view>
          </el-main>
        </el-scrollbar>
      </el-container>
    </el-container>
  </div>
</template>

 <script>
import store from "../store";
import { mapMutations, mapState } from "vuex";
import { ElMessage } from "element-plus";

import Breadcrumb from "../components/Breadcrumb/index.vue";
import {
  Expand,
  Fold,
  Odometer,
  ChatLineSquare,
  Plus,
  Operation,
} from "@element-plus/icons-vue";

export default {
  components: {
    Expand,
    Fold,
    Odometer,
    ChatLineSquare,
    Plus,
    Operation,
    // 面包屑
    Breadcrumb,
  },
  data() {
    return {
      isCollapse: false,
      // 路由渲染
      menuList: store.state.login.routerList,
      // 节点是否隐藏
      isHidden: true,
      // 头像
      circleUrl:
        "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
      // 用户信息
      user: JSON.parse(localStorage.getItem("user")) || "",
      // 面包屑
      breadList: [],
      // 角色
      role: localStorage.getItem("author"),
    };
  },
  computed: {
    ...mapState({
      workbench: (state) => state.workbench,
    }),
  },

  methods: {
    ...mapMutations({
      getWorkbench: "getWorkbench",
    }),
    init() {
      this.getWorkbench({ getWorkbench });
    },
    toggleIsCollapse() {
      this.isCollapse = !this.isCollapse;
      this.isHidden = !this.isHidden;
    },
    back(){
      localStorage.clear('user')
      this.$router.push('/login')
      ElMessage({
          message: "退出成功",
          type: "success",
        });
    },
    created() {
      this.init();
    },
  },
};

// 是否展开
</script>
 <style lang="scss" >
* {
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
.common-layout {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.aside {
  height: 100%;
  // overflow: hidden;
  height: 100%;
  background-color: #001529;
}
.el-menu-vertical-demo {
  height: 100%;
}
.el-header {
  --el-header-height: "100%";
  width: 100%;
  background: #fff;
}
// 头部
.svg-right {
  display: flex;
  align-items: center;
  // justify-content: flex-end;
  justify-content: space-between;
}
/* 是否展开 */
.toggle_button {
  color: #fff;
  text-align: center;
  cursor: pointer;
}

.container {
  height: 100vh;
  background: #f0f2f5;

  // width: 100vw;
}
// 修改滚动条样式，利用伪元素-webkit-scrollbar。
.aside::-webkit-scrollbar {
  width: 3px;
}
// 滚动条里面的滑块
.aside::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: #ccc;
}
// 滚动条的轨道(里面装有thumb)
.aside::-webkit-scrollbar-track {
  box-shadow: inset 0 0 2px #ccc;
  border-radius: 5px;
}
.content {
  background: #f0f2f5;
  padding: 0;
  width: 95%;
  margin: 0 auto;
}
.el-card {
  width: 100%;
}
.el-card__body {
  width: 100%;
  // padding: 100px;
}
</style>

